<template>
<div>
  <hc></hc>
  <div class="w-70 m-auto mt-20">
    <h3 class="flex align-center justify-center f26">{{content}}</h3>
    <div class="w-100">
      <Progress :percent="percent" :stroke-width="20" text-inside />
      <div class="w-90 m-auto flex align-center justify-between">
        <div class="flex align-center justify-between f14"
          v-for="(item, index) in orderList"
          :key="index">
          {{item}}
        </div>
      </div>
    </div>
    <div class="my-30">
      <div class="f18 flex align-center mb-10">商品数据</div>
      <Table :data="commodityList" :columns="columns"></Table>
    </div>
    <div>
      <div class="f18 flex align-center justify-between mb-20">
        <p>收货信息</p>
        <Button type="primary" @click="editInfo" v-show="formData.orderStatus < 20">{{formDisabled? '编辑信息':'取消编辑'}} </Button>
      </div>
      <Form ref="formData" :model="formData" :rules="ruleData" :label-width="100">
        <FormItem label="收件人姓名:" prop="receiverName">
          <Input v-model="formData.receiverName" :disabled="formDisabled" />
        </FormItem>
        <FormItem label="收件人电话:" prop="receiverMobile">
          <Input v-model="formData.receiverMobile" :disabled="formDisabled" maxlength="11" />
        </FormItem>
        <FormItem label="收件人地址:" prop="receiverAddress">
          <Input v-model="formData.receiverAddress" :disabled="formDisabled" />
        </FormItem>
      </Form>
    </div>
    <div>
      <div class="f18 flex align-center mb-10">支付方式</div>
      <div class="mb-20">
        支持:
        <i class="iconfont icon-huabei fc-blue mr-2"></i>花呗
        <i class="iconfont icon-xinyongqia fc-yellow mr-2"></i>信用卡
        <i class="iconfont icon-weixin fc-green mr-2"></i>微信
        <i class="iconfont icon-zhifubao fc-blue mr-2"></i>支付宝
      </div>
    </div>
    <div class="mt-10 flex align-center justify-end w-100 mb-50">
      <Button type="error" style="width:100px;" class="mr-10" @click="cancelOrder" v-show="formData.orderStatus < 20 && formDisabled">取消订单</Button>
      <Button type="success" style="width:100px;" class="mr-10" @click="payOrder" v-show="formData.orderStatus < 20 && formDisabled">支付订单</Button>
      <Button type="success" style="width:100px;" @click="confirm" class="mr-10" v-show="formData.orderStatus === 30">确认收货</Button>
      <Button style="width:100px;" type="primary" class="mr-10" @click="submitOrder" v-show="!formDisabled || !formData.orderStatus">保存信息</Button>
      <Button style="width:100px;" @click="goBack">返回</Button>

    </div>
  </div>
  <Modal v-model="isModel" title="请扫码支付">
    <div class="flex flex-column align-center">
      <img :src="imgData" />
      <div>
        <p><span class="fc-red">tips: 此版本为演示版本不提供支付</span><a @click="nextStep">点此进入下一步</a></p>
      </div>
    </div>
    <div slot="footer">
      <Button @click="isModel= false">取消支付</Button>
    </div>
  </Modal>
</div>
</template>
<script>
import hc from 'components/header-component'
import fc from 'components/floor-component'
import { orderDetail,createOrder, orderPay, orderQrCode, updateByOrderNo, orderCancel, orderFinish } from 'api'
import shopping from '@/mixins/shoppingMixins.js'
import utils from 'utils/index.js'
export default {
  name: '',
  mixins: [shopping],
  components: {
    fc,
    hc
  },
  data () {
    return {
      percent: 25,
      content: '填写并核对订单信息',
      orderList: ['购物车','下单','付款','出库','交易成功'],
      commodityList: [],
      columns: [
        {
          type: 'index',
          title: '序号',
        },
        {
          title: '商品图片',
          render: (h,params) => {
            let img = params.row.productImage? params.row.productImage : params.row.productImg
            return <img style="height:100px" src={this.baseURL + img} />
          }
        },
        {
          title: '商品名称',
          key: 'productName',
          align: 'center',
        },
        {
          title: '商品价格',
          key: 'price',
          align: 'center',
          render: (h,params) => {
            return <div>{ params.row.price }</div>
          }
        },
        {
          title: '商品数量',
          key: 'quantity',
          align: 'center',
          render: (h,params) => {
            return <div>{params.row.quantity}</div>
          }
        }
      ],
      formDisabled: false, // 是否可以被编辑 false 可以被编辑
      isModel: false, // 弹窗是否显示
      imgData: '', // 支付二维码
      formData: {},
      ruleData: {
        receiverName: [
          {required: true, message: '名称不能为空', trigger: 'blur'}
        ],
        receiverMobile: [
          {required: true, validator:utils.validatePhone, trigger: 'blur'},
        ],
        receiverAddress: [
          {required: true, message: '地址不能为空', trigger: 'blur'}
        ]
      },
    }
  },
  created() {
    if (this.$route.query.data) {
      console.log(this.$route.query.data)
      this.commodityList = JSON.parse(this.$route.query.data)
    } else {
      this.orderDetail(this.$route.query.orderNo)
      this.content= '订单详情'
      this.formDisabled= true
    }
  },
  methods: {
    // 订单详情
    orderDetail(orderNo) {
      orderDetail(orderNo).then(res => {
        this.formData = res
        this.commodityList = res.orderItemVOList
        this.percent= this.formData.orderStatus * 2.5
      })
    },
    // 生成二维码
    orderQrCode() {
      orderQrCode(this.$route.query.orderNo).then(res => {
        this.imgData= res
      })
    },
    // 进入下一步
    nextStep() {
      this.isModel= false
      orderPay(this.$route.query.orderNo).then(res => {
        this.payStatus = false
        this.orderDetail(this.$route.query.orderNo)
        this.$Message.success('支付成功!')
      })
    },
    // 编辑信息
    editInfo() {
      this.formDisabled= !this.formDisabled
    },
    // 返回
    goBack() {
      this.$router.push({
        path: '/personal-center',
        query: {
          isShow: 1
        }
      })
    },
    // 取消订单
    cancelOrder() {
      this.$Modal.confirm({
        title: '取消订单',
        content: '您确认取消该订单吗？',
        onOk: () => {
          orderCancel(this.$route.query.orderNo).then(res => {
            this.$Message.success('取消成功')
            this.$router.push({
              path: '/personal-center',
              query: {
                isShow: 1
              }
            })
          }) 
        }
      })
    },
    // 支付订单
    payOrder(data) {
      this.isModel= true
      this.orderQrCode()
    },
    // 确认收货
    confirm() {
      this.$Modal.confirm({
        title:"温馨提示",
        content:"确认已收货吗？",
        onOk: () => {
          orderFinish(this.$route.query.orderNo).then(res => {
            this.$Message.success('已确认收货')
            this.$router.go(0)
          })
        }
      })
      
    },

    // 创建订单
    createOrder() {
      createOrder(this.formData).then(res => {
        this.$Message.info('创建成功')
        this.$router.replace({
          path: '/personal-center',
          query: {
            isShow: 1
          }
        })
      })
    },
    // 保存
    submitOrder() {
      this.$refs['formData'].validate((valid) => {
        if (valid) {
          if (this.formData.orderStatus) {
            this.$Message.info('修改成功！')
            this.formDisabled = true
            updateByOrderNo(this.formData).then(res => {
              this.orderDetail(this.$route.query.orderNo)
            })
          } else {
            this.createOrder()
          }
        } else {

        }
      })
    }
  },
}
</script>
<style lang='css' scoped>
.fc-yellow{
  color: rgb(234,146,83);
}
.fc-green{
  color: rgb(16,210,105);
}
.mr-2{
  margin-right: 2px;
}
</style>